<template>
  <component v-bind:is="currentItemComponent" :index="(datas.path || getTime)" :key="datas.id">
    <i  v-if="isLeaf && datas.icon" :class="datas.icon" class="iconfont"></i>
    <span v-if="isLeaf" slot="title">{{datas.title}}</span>
    <template slot="title" v-if="!isLeaf">
      <i v-if="datas.icon" :class="datas.icon"  class="iconfont"></i>
      <span slot="title">{{datas.title}}</span>
    </template>
    <my-el-submenu
      v-if="!isLeaf"
      v-for="item in datas.lists"
      :datas="item"
      :key="item.id"
     ></my-el-submenu>
  </component>
</template>

<script type="text/ecmascript-6">

export default {
  name: 'MyElSubmenu',
  components: {},
  props: {
    datas: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      hc: true
    };
  },
  methods: {},
  computed: {
    currentItemComponent() {
      return this.isLeaf ? 'el-menu-item' : 'el-submenu';
    },
    getTime() {
      return new Date().getTime() + '';
    },
    isLeaf() {
      let lists = this.datas.lists;
      let isLeaf = lists ? lists.length === 0 : true;
      return isLeaf;
    }
  },
  mounted() {
  },
  destroyed() {
  }
};
</script>
<style scoped lang="less">
.myElSubmenu {
}
</style>
